<template>
  <div class="box">
    <div class="swiper">
      <div class="swiper-wrapper">
        <!-- Slides -->
        <div class="swiper-slide">
          <img src="https://images.unsplash.com/photo-1656173460244-faad38c026e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1470&q=80" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://images.unsplash.com/photo-1656380605767-28a92b240053?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://images.unsplash.com/photo-1656145076222-d43e10c4338f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://images.unsplash.com/photo-1656147084224-3ec22fbd3e96?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=735&q=80" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://images.unsplash.com/photo-1656328670689-06f48c226aaf?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://images.unsplash.com/photo-1656329020255-b5b450d45704?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80" alt="">
        </div>
        <div class="swiper-slide">
          <img src="https://images.unsplash.com/photo-1655853494101-712187ddd4e6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=688&q=80" alt="">
        </div>
      </div>
      <div class="dialog"></div>
      <div class="swiper-pagination">

      </div>


      <div class="swiper-scrollbar"></div>
    </div>
  </div>
</template>

<script>
import Swiper from 'swiper';
import { Navigation, Pagination } from 'swiper/modules';
// import Swiper and modules styles
import 'swiper/css';
import 'swiper/css/navigation';
import 'swiper/css/pagination';

export default {
  data(){
    return{

    }
  },
  mounted(){
    this.swiper = new Swiper('.swiper', {
      slidesPerView: 4,
      spaceBetween: 20,
      loop: false,
      pagination: {
        el: ".swiper-pagination",
        clickable: true,
      },
    })
  },
  components: {
  }
}
</script>

<style lang="scss">
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body,html{
  width: 100%;
  height: 100%;
}
.box{
  width: 1200px;
  height: 400px;
  margin: 40px auto;
  background: #eee;
  padding: 10px;
  .swiper{
    height: 100%;
    .swiper-wrapper{
      display: flex;
      align-items: center;
    }
  }
}
.swiper-slide{
  height: 90%;
  background: #ddd;
  img{
    height: 100%;
    width: 280px;
  }
}
</style>
